import { defineComponent } from 'vue';
import { getNews } from '@/api/home';
import './index.less';
import { Icon, NoticeBar, Swipe, SwipeItem } from 'vant';

export default defineComponent({
  name: 'News',
  setup() {
    const data = ref([]) as AnyObject;

    getNews().then((res) => {
      data.value = res.data;
      console.log(res);
    });

    return () => (
      <NoticeBar color="#919293" background="#f2f3f5" left-icon="volume-o">
        <Swipe
        class="swiper"
          vertical
          autoplay={6000}
          touchable={false}
          show-indicators={false}
        >
          {data.value?.map((_item: AnyObject) => (
            <SwipeItem class="swiper_item">
              <a href={_item.url} class="news flex-between" target="_blank">
                <div class="title">{_item.title}</div>
                <div class="date">{_item.date}</div>
              </a>
            </SwipeItem>
          ))}
        </Swipe>
      </NoticeBar>
    );
  }
});
